<div class="gc-info-widget">
    <div class="cluster-dashboard-item-header">
        <h3> <i class="icon-memory"></i> <span>GC</span></h3>
        <button class="btn btn-warning btn-sm" data-bind="click: remove" title="Remove widget from board">
            <i class="icon-trash"></i>
        </button>
        <button class="btn btn-default btn-sm" data-bind="click: toggleFullscreen">
            <i data-bind="css: { 'icon-fullscreen': !fullscreen(), 'icon-exit-fullscreen': fullscreen },
                          attr: { title: fullscreen() ? 'Minimize widget' : 'Maximize widget' }"></i>
        </button>
    </div>
    <div class="property-container" data-bind="css: { 'property-collapse': !showGenerationsDetails() }">
        <div class="property">
            <div class="flex-horizontal">
                <button class="collapse-arrow property-control" data-bind="click: toggleGenerationsDetails">
                    <i class="icon-chevron-down"></i>
                    <i class="icon-chevron-up"></i>
                </button>
                <div class="nodes-container" data-bind="foreach: nodeStats">
                    <div data-bind="attr: { class: 'nodes-item node-' + tag }, css: { 'no-data': !currentItem() }">
                        <div class="nodes-item-header" data-bind="css: { 'spinner': spinner }">
                            <div class="node-label" data-bind="text: tag"></div>
                            <div class="node-value">
                                <span data-bind="text: memoryFormatted"></span>
                                <span class="supplementary-info">Total heap size after GC</span>
                            </div>
                            <div title="Data has been pinned. Click on any chart to unpin" class="pin-container" data-bind="css: { active:  $root.pinned() && currentItem() }">
                                <i class="icon-pinned text-warning"></i>
                            </div>
                        </div>

                        <div class="details-list">
                            <div class="details-item flex-row align-items-center">
                                <div class="details-item-name">GC Kind</div>
                                <div class="details-item-value" data-bind="text: type"></div>
                            </div>
                            <div class="details-item flex-row align-items-center">
                                <div class="details-item-name">Concurrent</div>
                                <div class="details-item-value" data-bind="text: concurrent"></div>
                            </div>
                            <div class="details-item flex-row align-items-center">
                                <div class="details-item-name">Compacted</div>
                                <div class="details-item-value" data-bind="text: compacted"></div>
                            </div>
                            <div class="details-item flex-row align-items-center">
                                <div class="details-item-name">Generation</div>
                                <div class="details-item-value" data-bind="text: generation"></div>
                            </div>
                        </div>
                        <div class="details-list">
                            <h4 class="no-padding-left">
                                &nbsp;
                                <span data-bind="text: $index() === 0 ? 'Generations (before GC → after GC)' : ' '"></span>
                            </h4>
                            <div data-toggle="tooltip" data-html="true" data-animation="true" data-placement="bottom" data-bind="tooltipText: fragmentationInfo">
                                <div class="details-item flex-row align-items-center gen-0">
                                    <div class="details-item-value" data-bind="text: gen0Formatted"></div>
                                </div>
                                <div class="details-item flex-row align-items-center gen-1">
                                    <div class="details-item-value" data-bind="text: gen1Formatted"></div>
                                </div>
                                <div class="details-item flex-row align-items-center gen-2">
                                    <div class="details-item-value" data-bind="text: gen2Formatted"></div>
                                </div>
                                <div class="details-item flex-row align-items-center loh">
                                    <div class="details-item-value" data-bind="text: lohFormatted"></div>
                                </div>
                                <div class="details-item flex-row align-items-center pinned">
                                    <div class="details-item-value" data-bind="text: pinnedFormatted"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gc-legend">
                <div class="details-item flex-row align-items-center gen-0">
                    <div class="details-item-name">
                        Gen0 <span class="rect"></span>
                    </div>
                </div>
                <div class="details-item flex-row align-items-center gen-1">
                    <div class="details-item-name">
                        Gen1 <span class="rect"></span>
                    </div>
                </div>
                <div class="details-item flex-row align-items-center gen-2">
                    <div class="details-item-name">
                        Gen2 <span class="rect"></span>
                    </div>
                </div>
                <div class="details-item flex-row align-items-center loh">
                    <div class="details-item-name" title="Large object heap">
                        LOH <span class="rect"></span>
                    </div>
                </div>
                <div class="details-item flex-row align-items-center pinned">
                    <div class="details-item-name" title="Pinned object heap">
                        POH <span class="rect"></span>
                    </div>
                </div>
            </div>
            <div class="graph-containers">
                
            </div>
        </div>
    </div>
    <div class="property-container" data-bind="css: { 'property-fixed': !showGenerationsDetails() }">
        <h4>GC Pauses</h4>
        <div class="property">
            <div class="flex-horizontal">
                <div class="nodes-container" data-bind="foreach: nodeStats">
                    <div data-bind="attr: { class: 'nodes-item node-' + tag }, css: { 'node-warning': pauseLevel() === 'warning', 'node-danger': pauseLevel() === 'danger', 'no-data': !currentItem() }">
                        <div class="nodes-item-header" data-bind="css: { 'spinner': spinner }">
                            <div class="node-label" data-bind="text: tag, tooltipText: $root.createGcPauseWarning(pauseLevel())" data-placement="right" data-toggle="tooltip"></div>
                            <div class="node-value">
                                <span data-bind="text: pauseFormatted"></span>
                                <span class="supplementary-info">Pause Time %</span>
                            </div>
                            <div title="Data has been pinned. Click on any chart to unpin" class="pin-container" data-bind="css: { active:  $root.pinned() && currentItem() }">
                                <i class="icon-pinned text-warning"></i>
                            </div>
                        </div>
                        <div class="details-list">
                            <div class="details-item" title="Background GC has two pauses">
                                <div class="details-item-name">Pause</div>
                                <div class="details-item-value" data-bind="text: pauseTotal"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="graph-container gc-pause-bubble-chart">
            </div>
        </div>
    </div>
</div>
